<template>
  <el-card style="height: 99%;padding: 0px">
    <el-row :gutter="36">
      <el-col :span="6">
        <el-card shadow="always" style="background-color:#33cabb;color:white;line-height: 160px">
          <div style="float: left; display: inline-block"><i class="el-icon-user" style="font-size: 40px"></i></div>
          <div style="float: right; display: inline-block">
            <p style="line-height: 80px">当前用户数</p>
            <p style="line-height: 0">{{stuNum}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #f96868;color:white">
          <div style="float: left; display: inline-block"><i class="el-icon-tableware" style="font-size: 40px;line-height: 160px"></i></div>
          <div style="float: right; display: inline-block">
            <p style="line-height: 80px">菜单数量</p>
            <p style="line-height: 0">{{menuNum}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #15c377;color:white">
          <div style="float: left; display: inline-block"><i class="el-icon-trophy" style="font-size: 40px;line-height: 160px"></i></div>
          <div style="float: right; display: inline-block">
            <p style="line-height: 80px">今日订单数</p>
            <p style="line-height: 0">{{todayOrderNum}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #926dde;color:white">
          <div style="float: left; display: inline-block"><i class="el-icon-coin" style="font-size: 40px;line-height: 160px"></i></div>
          <div style="float: right; display: inline-block">
            <p style="line-height: 80px">今日交易总额</p>
            <p style="line-height: 0">{{price}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="always" style="margin-top: 40px">
      <p style="margin-left: 10px">首页>最新订单消息</p>
      <el-table
          :data="tableData"
          border
          style="width: 100%;line-height: 50px">
        <el-table-column
            prop="id"
            label="订单编号">
        </el-table-column>
        <el-table-column
            prop="student.name"
            label="订单姓名"
        >
        </el-table-column>
        <el-table-column
            prop="price"
            label="订单价格">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="联系方式">
        </el-table-column>
        <el-table-column
            prop="isPay"
            label="订单状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isPay == true">已支付</el-tag>
            <el-tag type="danger" v-if="scope.row.isPay == false">未支付</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-card>
</template>

<script>
import {doGetOrders} from "@/api/order";
import {doGetMsg} from "@/api/admin";

export default {
  name: "home",
  data() {
    return {
      tableData: [
      ],
      stuNum:0,
      menuNum:0,
      todayOrderNum:0,
      price:0
    }
  },
  mounted() {
    doGetOrders(1,6).then(res=>{
      if (res.code===200){
        this.tableData=res.data.records;
      }
    });
    doGetMsg().then(res=>{
        this.stuNum=res.data.stuNum;
      this.menuNum=res.data.menuNum;
      this.todayOrderNum=res.data.todayOrderNum;
      this.price=res.data.price;
    })
  }
}
</script>

<style lang="less" scoped>
el-card{
  line-height: 160px;
}
</style>